<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php include(APPLICATION_BASE_TPL_PATH . "/inc/include.phtml"); ?>
    <title>订单列表</title>
</head>

<body>

<div id="wrapper">
    <?php echo $menuview; ?>
    <div id="page-wrapper">
        <div class="row" id="waring">
            <div class="col-lg-12">
                <h1 class="page-header">订单列表</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <table class="table table-bordered">
                        <form id="per" class="form-inline">
                            <tr></tr>
                            <tr>
                                <td>用户id</td>
                                <td class="col-lg-3">
                                    <input type="text" name="uid" id="uid" class="search_input inline"
                                           style="width:100%;height: 34px;" value="">
                                </td>

                                <td class="col-lg-3" colspan="2">
                                    <button id="switch" class="btn btn-info">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>&nbsp;&nbsp;
                                </td>
                            </tr>
                            <tr>

                            </tr>
                        </form>
                    </table>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table" id="dataTables">
                            </table>
                        </div>
                        <!-- /.table-responsive -->

                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    $(document).ready(function () {
        $('#date').datetimepicker({
            lang: 'ch',
            step: 60,
            format: "Y-m-d",
            timepicker: false   //关闭时间选项
        });

        var oTable = $("#dataTables"),
            perForm = $("#per"),
            perSearchUrl = "<?=APP_ADMIN_PATH?>/order/search";
        oTable.dataTable({
            "bDestroy": true,
            "ajax": perSearchUrl,
            "columns": [
                {title: "订单id", data: "oid"},
                {title: "用户名", data: "user_name"},
                {title: "充值账号", data: "mobile"},
                {title: "价格", data: "price"},
                {title: "时长", data: "minute"},
                {title: "状态", data: "status",render: function (data, type, row) {
                    switch(data){
                        case '1':
                            return '未付款';
                        case '2':
                            return '付款失败';
                        case '9':
                            return '成功';
                        default:
                            return data;
                    }
                }},
                {title: "日期", data: "ctime"},
            ],
            "aoColumnDefs": [
                {
                    sDefaultContent: '',
                    aTargets: ['_all']
                }
            ],
            "sDom": '<"top">rt<"bottom"p><"clear">',
            "iDisplayLength": 10,
            "bScrollCollapse": true,
            'ordering': false,
        });

        perForm.on('submit', function () {
            var uri = perForm.serialize();
            oTable.DataTable().ajax.url(perSearchUrl + '?' + uri).load();
            return false;
        });

    });
</script>
<style>
    table.table > tbody > tr > td {
        text-align: center;
        vertical-align: middle;
    }

    .thump {
        width: 30px;
        height: 30px;
        padding: 1px;
        background-color: #FFF;
        border: 1px solid #DDD;
        border-radius: 2px;
        transition: all 0.2s ease-in-out 0s;
    }
</style>

</body>

</html>
